/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:20
* @LastEditors: WangXi
* @LastEditTime: 2023-06-26 16:31:20
* @Description: desc
*/
<template>
	<view class="modify-page">
		<!-- 头部 -->

		<c-layout>
			<c-navigation-bar slot="head"
				:title="(pwdState? $t('modify.amend'):$t('modify.seting') +$t('modify.pwdType['+ this.modifyData.type +']'))"
				:navType='search.navType' :navPlaceholder='search.navPlaceholder' :navThmen='search.navThmen'
				@focusEvent='focusEvent' @switchSvgEvent='switchSvgEvent'>
			</c-navigation-bar>
			<view class="container-box form-modify">
				<template v-if="modifyData.type !== '0' && ''">

					<view class="input-message-code">
						<view class="tel-title">
							请输入手机验证码
						</view>
					</view>
					<view class="user-phone" style="display: flex;justify-content: space-around;">
						<u-message-input width="50" @finish="msgCodeFinish" :maxlength="6"
							mode="bottomLine"></u-message-input>

						<view class="">
							<u-button class="blue" @click="sendMessageCodeAjax" :loading="sendCodeLoad"
								:disabled="!!sendMsgCodeData.timmer">
								发送验证码
								{{sendMsgCodeData.timmer?sendMsgCodeData.count:''}}
							</u-button>
						</view>
					</view>
				</template>
				<!-- <view class="input-box" v-for="(item,index) in modifyInputList" :key="item.val">
					<form action="">
						<titleInput v-model.trim="modifyData[item.key]" :valKey="item.key"
							:type="item.val ==='Password'?'password':'text'" :title="item.val">
						</titleInput>
					</form>
				</view> -->
				<u-form :model="modifyData" ref="uForm" class="pwd-form">
					<u-form-item v-if="pwdState" :label="$t('modify.oldPassword')" prop="oldPassword"
						labelPosition="top">
						<input v-model="modifyData.oldPassword" :disabled="!telephoneVerify" :inputmode="modifyData.type?'numeric':'text'"
							:password="showPwd.oldShowPassword" placeholder='' />
						<imageForSize size="60" @click="showChange('oldShowPassword')" :key="showPwd.oldShowPassword+''"
							:src="require(`@/static/images/login/eye-${showPwd.oldShowPassword?'close':'open'}.png`)">
						</imageForSize>
					</u-form-item>
					<!-- pwdState? $t('modify.newPassword'):$t('modify.pwdType[0]') -->
					<u-form-item :label="pwdState? $t('modify.newPassword'):$t('modify.pwdType[0]')" prop="password"
						labelPosition="top">
						<input v-model="modifyData.password" :disabled="!telephoneVerify" :inputmode="modifyData.type?'numeric':'text'"
							:password="showPwd.newShowPassword" placeholder='' />
						<imageForSize size="60" @click="showChange('newShowPassword')" :key="showPwd.newShowPassword+''"
							:src="require(`@/static/images/login/eye-${showPwd.newShowPassword?'close':'open'}.png`)">
						</imageForSize>
					</u-form-item>
					<u-form-item :label="$t('modify.againPassword')" prop="rePassword" labelPosition="top">
						<input v-model="modifyData.rePassword" :disabled="!telephoneVerify" :inputmode="modifyData.type?'numeric':''"
							:password="showPwd.reShowPassword" placeholder='' />
						<imageForSize size="60" @click="showChange('reShowPassword')" :key="showPwd.reShowPassword+''"
							:src="require(`@/static/images/login/eye-${showPwd.reShowPassword?'close':'open'}.png`)">
						</imageForSize>
					</u-form-item>
				</u-form>
				<view class="instructionsBox">
					<view class="instructions">
						{{$t('recharge.Description')}}:
					</view>
					<!-- <view class="instructions" >
					设置数段文字说明展示
				</view> -->
				
					<view class="instructionsContent">
						<rich-text :nodes="instructionsContent"></rich-text>
					</view>
				</view>
			</view>
		</c-layout>
		<!-- 修改 -->

		<view class="bootom">
			<u-button :loading="isloading" @click="modifyClick" type="primary">
				{{$t('modify.affirm')}}
			</u-button>
		</view>

		<!-- 模态框 -->
		<modal :show='modal.show' :content='modal.content' @confirmClick='confirmClick' @cancelClick='cancelClick'>
		</modal>
		<!-- <promptDialog ref="promptDialog"></promptDialog> -->
	</view>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				console.log(!reg.test(value));
				var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{8,20}$/;
				if (!reg.test(value)) {

					callback(new Error(this.$t('modify.ruleInfo')));
				} else {
					// if (this.form.confirmPwd !== '') {
					// 	// this.$refs.uForm.validateField('confirmPwd');
					// 	callback(new Error('请输入新密码'));
					// }
					callback();
				}
			};

			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(this.$t('modify.placeinputpass')));
				} else if (value !== this.modifyData.password) {
					callback(new Error(this.$t('modify.passwordNosee')));
				} else {
					callback();
				}
			};
			return {
				isloading: false,
				instructionsContent: "", //描述内容
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('modify.title')
				},

				// 修改输入框组
				modifyInputList: [{
						val: this.$t('modify.oldPassword'),
						key: 'oldPassword',
					},
					{
						val: this.$t('modify.newPassword'),
						key: 'password',
					},
					{
						val: this.$t('modify.againPassword'),
						key: 'rePassword',
					}
				],
				// 数据
				modifyData: {
					oldPassword: '',
					password: '',
					rePassword: '',
					type: undefined
				},

				rulesList: [{
						password: [{
								required: true,
								message: this.$t('modify.rulesList.message'),
								trigger: 'blur'
							},
							{
								pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{8,16}$/,
								message: this.$t('modify.ruleInfo'),
								trigger: 'blur'
							},
						],
						oldPassword: [{
							required: true,
							message: this.$t('modify.rulesList.message'),
							trigger: 'blur'
						}, ],
						rePassword: [{
								required: true,
								message: this.$t('modify.rulesList.message3'),
								trigger: 'blur'
							},
							{
								min: 8,
								max: 20,
								message: this.$t('modify.rulesList.loginMessage1'),
								trigger: 'blur'
							},
							{
								validator: validatePass2,
								trigger: 'blur',
								required: true
							}
						]
					},
					{
						password: [{
								required: true,
								message: this.$t('modify.rulesList.message'),
								trigger: 'blur'
							},
							{
								len: 6,
								message: this.$t('modify.rulesList.message1'),
								trigger: 'blur'
							},
							{
								pattern: /^[0-9]*$/g,
								message: this.$t('modify.rulesList.message2'),
								trigger: 'blur'
							}
						],
						oldPassword: [{
							required: true,
							message: this.$t('modify.rulesList.message'),
							trigger: 'blur'
						}, ],
						rePassword: [{
								required: true,
								message: this.$t('modify.rulesList.message3'),
								trigger: 'blur'
							},
							{
								len: 6,
								message: this.$t('modify.rulesList.message2'),
								trigger: 'blur'
							},
							{
								validator: validatePass2,
								trigger: 'blur',
								required: true
							}
						]
					}
				],
				modal: {
					show: false,
					content: ''
				},
				pwdState: true, // 密码是否已经设置
				telephoneVerify: true, // 手机号是否验证
				sendCodeLoad: false, // 发送验证码load
				sendMsgCodeData: {
					timmer: null,
					count: 59
				}, //发送冷却 
				showPwd: {
					oldShowPassword: false,
					newShowPassword: false,
					reShowPassword: false
				}
			}
		},
		onLoad(data) {
			this.$u.get('/app/language/text/info/a9327267029643b59226d00dcbb6b1a4').then(res => {
				this.instructionsContent = res.data
			})
			console.log(this.vuex_user_info)
			const {
				type,
				set
			} = data
			this.modifyData.type = ~~type // 设置的密码类型
			this.pwdState = set === '1' // set 为1代表已经设置0则未设置
			if (type === '0') {
				this.modal.content = this.$t('modify.affirmChangeHint')
			} else {
				this.modal.content = this.$t('modify.affirmChangePay')
			}

		},
		methods: {
			modifyClick() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.isloading = true
						this.modal.show = true
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			modalTrueClick() {
				this.$u.post('/app/user/change/password', {
					...this.modifyData
				}).then(res => {
					if (this.modifyData.type == 0) {
						// this.$u.vuex('vuex_token', '')
						uni.removeStorageSync('vuex_token');
						uni.redirectTo({
							url: '/pages/login/login'
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},

			confirmClick() {
				this.modal.show = false
				// 店铺密码单独接口修改
				if (this.modifyData.type == 2) {
					this.changeStorePwdAjax()
				} else {
					this.pwdState ? this.changePwdAjax() : this.setPwdAjax()
				}

			},

			cancelClick() {
				this.isloading = false
				this.modal.show = false
			},
			// 修改密码
			changePwdAjax() {
				console.log(this.modifyData.type)
				this.isloading = false
				this.$u.post('/app/user/change/password', {
					...this.modifyData,
					phone: this.vuex_user_info.mobile
				}).then(res => {
					this.$u.toast(res.msg)
					setTimeout(() => {
						if (this.modifyData.type == 0) {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						} else {
							this.publicJS.backOption()
						}
					}, 500)
				})
			},
			// 设置密码请求
			setPwdAjax() {
				// if(!this.modifyData.smsCode){
				// 	this.$u.toast("请输入验证码")
				// 	return
				// }
				this.$u.post('/app/user/set/password', {
					...this.modifyData,
					phone: this.vuex_user_info.mobile
				}).then(res => {
					this.$u.toast(res.msg)
					setTimeout(() => {
						this.isloading = false
						this.publicJS.backOption()
					}, 500)
				})


			},
			// 修改店铺密码
			changeStorePwdAjax() {
				this.$u.post('/app/shop/password/set', this.modifyData).then(res => {
					this.$u.toast(res.msg)
					setTimeout(() => {
						this.isloading = false
						this.publicJS.backOption()
					}, 500)
				})
			},
			switchSvgEvent() {},
			focusEvent() {},
			// 发送短信验证码
			sendMessageCodeAjax() {
				this.sendCodeLoad = true
				const h = () => {
					this.sendMsgCodeData.timmer = setInterval(() => {
						this.sendMsgCodeData.count--
						if (!this.sendMsgCodeData.count) {
							this.sendMsgCodeData.timmer = clearInterval(this.sendMsgCodeData.timmer)
							this.sendMsgCodeData.count = 59
						}
					}, 1000)
				}
				this.$u.post('/app/user/sendMessage/' + '2' + '110').then(res => {
					h()
				}).catch(err => {
					console.log(err, 'err');
					h()
					this.sendCodeLoad = false
				})
			},
			// 验证码完成
			msgCodeFinish(val) {
				this.modifyData.smsCode = val
			},
			// 修改
			showChange(key) {
				this.$set(this.showPwd, key, !this.showPwd[key])
				// this.showPwd[key] = !this.showPwd[key]
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.modifyData.type == 0 ? this.rulesList[0] : this.rulesList[1]);
		},
	}
</script>

<style lang="scss">
	.modify-page {
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;

		.input-box {
			margin-bottom: 40rpx;
		}

		.user-phone {
			padding: 20rpx 0;
		}

		.input-message-code {
			padding: 20rpx 0;
		}

		.bootom {
			position: absolute;
			bottom: 60rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);

			.u-btn {
				padding: 30rpx;
			}
		}

		.pwd-form {
			input {
				width: 100%;
			}
		}
	}

	.instructions {
		margin-top: 40rpx;
	}

	.instructionsContent {
		margin-top: 20rpx;
		font-size: 20rpx;
		line-height: 30rpx;
		text-align: justify;
	}
</style>